<template>
  <div>
    <yd-tab class="mt45" ref="box" @click.native="backTop">
      <yd-tab-panel label="基本信息">
        <yd-slider autoplay="3000">
          <yd-slider-item v-for="(i,index) in data.pictures" :key="index">
            <img :src="i">
          </yd-slider-item>
        </yd-slider>
        <div class="content">
          <p style="font-size:16px;">{{data.name}}</p>
          <p class="fll">
            <span class="red">￥{{data.retail_price}}</span> <span class="price">￥{{data.market_price}}</span>
          </p>
          <p class="flr"><span>月销{{data.month_sale}}</span></p>
        </div>
        <yd-cell-group @click.native="toPath">
          <yd-cell-item arrow>
            <span slot="left" class="w30">店铺</span>
            <span slot="left" class="pl10">{{data.shop_name}}</span>
          </yd-cell-item>
        </yd-cell-group>
        <yd-cell-group @click.native="toPath">
          <yd-cell-item arrow>
            <span slot="left" class="w30">选择</span>
            <span slot="left" class="pl10">数量</span>
          </yd-cell-item>
        </yd-cell-group>
        <yd-cell-group>
          <yd-cell-item>
            <span slot="left" class="w30">运费</span>
            <span slot="left" class="pl10" style="white-space: normal">{{data.freight_info}}</span>
          </yd-cell-item>
        </yd-cell-group>
        <div class="likeS">
          <span style="font-size:20px;">猜你喜欢</span>
          <div class="width100" @click="toPath">
            <div class="width33" v-for="i in likeList" :key="i.id">
              <img :src="i.share_info.logo" style="width:95%;border-radius: 5px;" alt="">
              <p class="pl5 tal ovf" style="line-height:20px!important;">{{i.name}}</p>
              <p class="pl5 red tal">￥{{i.retail_price}}</p>
            </div>
          </div>
        </div>
      </yd-tab-panel>
      <yd-tab-panel label="图文详情">
        <div class="imgDetail">
          <div v-for="(i,index) in data.pictures" :key="index">
            <img :src="i" style="padding:0px 8px;width:100%;" alt="">
          </div>
        </div>
      </yd-tab-panel>
    </yd-tab>
    <footer class="foorer">
      <div>
        <button size="large" type="primary" class="bgOrange" @click="toPath">加入购物车</button>
      </div>
      <div>
        <button size="large" type="primary" class="bgRed" @click="toPath">立即购买</button>
      </div>
    </footer>
  </div>
</template>
<script>
import request from '../utils'
export default {
  data () {
    return {
      data: {},
      likeList: [],
      sharerId: this.$route.query.sharerId ? this.$route.query.sharerId : '',
    }
  },
  methods: {
    toPath () {
      const server = request.server
      window.location.href = `${server}/web/auth?sharerId=${this.sharerId}`
    },
    backTop () {
      document.body.scrollTop = 0
    },
    //获取商品信息
    async getGoodsDetail () {
      let id = this.$route.params.id
      let url = `/items/${id}`
      let result = await request.getData1(url)
      if (result.status_code != 201) {
        if (result.message) {
          this.$dialog.toast({ mes: result.message, icon: 'error', timeout: 2500 });
        } else {
          this.data = result.data
          let url = `/items/${id}/like?limit=6`
          let res = await request.getData1(url)
          if (res.status_code != 201) {
            if (res.message) {
              this.$dialog.toast({ mes: result.message, icon: 'error', timeout: 2500 });
            } else {
              this.likeList = res.data
            }
          }

        }
      }
    },
  },
  mounted () {
    this.getGoodsDetail();
  }
}
</script>
<style scoped>
.content {
  background: #fff;
  padding: 15px;
  overflow: auto;
  margin-bottom: 10px;
}
.price {
  text-decoration: line-through;
  color: #999;
  font-size: 12px;
  margin-left: 5px;
}
p {
  line-height: 28px;
}
.foorer {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  background: #fff;
}
.foorer div {
  width: 50%;
  float: left;
}
.foorer button {
  height: 50px;
  width: 100%;
  border: none;
  outline: none;
  font-size: 18px;
}

.bgRed {
  background: #f53954;
  color: #fff;
}
.bgOrange {
  background: orange;
  color: #fff;
}
.imgDetail {
  margin-bottom: 57px;
  overflow: auto;
}
.width33 {
  width: 33.3%;
  float: left;
  text-align: center;
  margin-top: 15px;
  overflow: auto;
}
.likeS {
  background: #fff;
  padding: 10px 10px;
  margin-bottom: 60px;
  overflow: auto;
}
.w30 {
  color: #999;
  width: 30px;
}
</style>